import React, { useState, useEffect } from 'react';
import { Menu, Layout, Input, message } from 'antd';
import { menu } from '@/routes/menu';
import { connect, Link } from 'umi';
import moment from 'moment';
import {
  qrCode,
  userCenter,
  wuhanLogo,
  national,
  getDayStrByNumber,
  getIsLogin,
  scrollToTop,
  newsDetail,
  highLight,
} from '@/utils/util';
import styles from './index.less';
import { history } from '@@/core/history';

const { Search } = Input;
const { Header } = Layout;

const SiteHeader: React.FC = (props) => {
  const { CurrentState, dispatch }: any = props;
  const [dateString, setDateString] = useState<string>('');
  const [current, setCurrent] = useState<string>(CurrentState);
  useEffect(() => {
    const dateMoment = moment(new Date());
    const year = dateMoment.year();
    const month = dateMoment.month() + 1;
    const date = dateMoment.date();
    const day = getDayStrByNumber(dateMoment.day());
    const dateStr = `${year}年${month}月${date}日  星期${day}`;
    setDateString(dateStr);
  }, []);
  useEffect(() => {
    setCurrent(CurrentState);
  }, [CurrentState]);
  const handleClick = (e) => {
    highLight(dispatch, e.key);
  };
  const goToPersonalCenter = () => {
    if (!getIsLogin()) {
      message.error('请先登录');
      scrollToTop();
      return;
    }
    try {
      history.push({ pathname: '/personalCenter' });
    } catch (error) {
      message.error('请联系管理员');
    }
  };
  return (
    <Header className={styles.headerWrapper}>
      <div className={styles.headerInfo}>
        <div className={styles.info}>
          <div className={styles.dateInfo}>{dateString}</div>
          <div className={styles.userInfo}>
            <a
              style={{ color: 'white', paddingTop: 2, paddingRight: 10 }}
              onClick={() => {
                process.env.SYSTEM === 'policy'
                  ? window.open('http://58.49.41.230:84/#/user/login')
                  : window.open('http://58.49.41.230:82/#/user/login');
              }}
            >
              审批端入口
            </a>
            <img src={userCenter} />
            <a
              style={{ color: 'white', paddingLeft: 10, paddingTop: 2 }}
              onClick={goToPersonalCenter}
            >
              个人中心
            </a>
          </div>
        </div>
        <div className={styles.headerOpt}>
          <div className={styles.platformInfo}>
            <img src={wuhanLogo} />
            <img src={national} />
            <div className={styles.platform}>
              <div className={styles.title}>武汉经济技术开发区(汉南区)</div>
              <div className={styles.subTitle}>
                {process.env.SYSTEM === 'policy' ? '政策兑现综合服务平台' : '政企直通车服务平台'}
              </div>
            </div>
          </div>
          {/* <div className={styles.search}> */}
          {/*  <img src={qrCode} /> */}
          {/*  <Search placeholder="请输入搜索内容" allowClear enterButton="搜索" size="large" /> */}
          {/* </div> */}
        </div>
      </div>
      <div className={styles.menuWrapper}>
        <Menu
          style={{ height: '50px', border: 'none' }}
          mode="horizontal"
          selectedKeys={[current]}
          onClick={handleClick}
        >
          {menu.map((item) => {
            return (
              <Menu.Item key={item.key}>
                <Link to={item.route}>{item.title}</Link>
              </Menu.Item>
            );
          })}
        </Menu>
      </div>
    </Header>
  );
};
export default connect(({ current }: any) => ({
  CurrentState: current.CurrentState,
}))(SiteHeader);
